require('./PageVoteSubject.less');

import React from "react";
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Store from './Store';
import Actions from './Actions';

import {
  ActivityIndicator,
  Button,
  Card, DatePicker, Flex, Icon, InputItem, List, NavBar, Pagination, SwipeAction, Switch, TabBar, Tabs, TextareaItem,
  WhiteSpace,
  WingBlank
} from "antd-mobile";

const Item = List.Item;

class VoteSubject extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    Actions.customInit(this.props.params.subjectId);
  }

  addQuestion() {
    Actions.addQuestion();
  }

  delQuestion() {
    Actions.delQuestion();
  }

  addOption() {
    Actions.addOption();
  }

  delOption(o) {
    Actions.delOption(o);
  }

  onPaginationChange(e) {
    Actions.onPaginationChange(e);
  }

  onSubjectTitleInput(val) {
    Actions.onSubjectTitleInput(val);
  }

  onSubjectDescriptionInput(val) {
    Actions.onSubjectDescriptionInput(val);
  }

  onSubjectEndTimeInput(val) {
    Actions.onSubjectEndTimeInput(val);
  }

  onQuestionTypeChange(value, q) {
    Actions.onQuestionTypeChange(value, q);
  }

  onQuestionTitleInput(val, q) {
    Actions.onQuestionTitleInput(val, q);
  }

  onQuestionDescriptionInput(val, q) {
    Actions.onQuestionDescriptionInput(val, q);
  }

  onOptionDescriptionInput(val, o) {
    Actions.onOptionDescriptionInput(val, o);
  }

  onSave() {
    Actions.onSave();
  }

  onPublish() {
    Actions.onPublish();
  }

  render() {

    let question = this.state.subject.questions[this.state.subject.pagination.current-1];

    let content = this.state.subject.isLoading ?
      <div className="loading-example">
        <div className="align">
          <ActivityIndicator
            toast
            text="加载中..."
            animating={this.state.subject.isLoading}
          />
        </div>
      </div>
      :
      <div>
        <div style={{backgroundColor: '#ffffff'}}>
          <WhiteSpace size="md"/>
          <Flex>
            <Flex.Item>
              <WingBlank size="sm">
                <Button type="primary" onClick={() => this.onSave()}>保存</Button>
              </WingBlank>
            </Flex.Item>
            <Flex.Item>
              <WingBlank size="sm">
                <Button type="primary" onClick={() => this.onPublish()}>发布</Button>
              </WingBlank>
            </Flex.Item>
          </Flex>
          <WhiteSpace size="md"/>
        </div>
        <div>
          <List renderHeader={'问卷'}>
            <InputItem
              placeholder="填写问卷标题（不超过50字，必填）"
              value={this.state.subject.subject.title}
              editable={true}
              clear={true}
              maxLength={50}
              onChange={(val) => {
                this.onSubjectTitleInput(val);
              }}
            />
            <TextareaItem
              placeholder="请填写描述说明（不超过500字，选填）"
              value={this.state.subject.subject.description}
              rows="3"
              onChange={(val) => {
                this.onSubjectDescriptionInput(val);
              }}
            />
            <DatePicker
              value={new Date(this.state.subject.subject.endTime)}
              minDate={new Date(Date.now())}
              onChange={(date) => {
                this.onSubjectEndTimeInput(date);
              }}
            >
              <List.Item arrow="horizontal">截止日期</List.Item>
            </DatePicker>
            <div className="white_space">
              <WhiteSpace size="md"/>
            </div>
            <Item onClick={() => this.addQuestion()}>
              <div style={{width: '100%', lineHeight: '20px', textAlign: 'center', color: 'green'}}>
                <span style={{fontSize: '20px'}}>+</span><span style={{fontSize: '16px'}}>添加问题</span>
              </div>
            </Item>
          </List>
          <WhiteSpace size="md"/>
          <List>
            <Item>
              <Pagination
                total={this.state.subject.pagination.total}
                current={this.state.subject.pagination.current}
                onChange={(e) => this.onPaginationChange(e)}
                locale={{
                  prevText: (<span style={{display: 'flex', alignItems: 'center'}}><Icon type="left"/>上一题</span>),
                  nextText: (<span style={{display: 'flex', alignItems: 'center'}}>下一题<Icon type="right"/></span>),
                }}
              />
            </Item>
          </List>
          <List renderHeader={
            <Flex>
              <Flex.Item>问题</Flex.Item>
              <Flex.Item>
                {
                  this.state.subject.questions && this.state.subject.questions.length > 1 ?
                    <div
                      style={{width: '100%', lineHeight: '20px', textAlign: 'right', color: 'green'}}>
                      <span onClick={() => this.delQuestion()} style={{fontSize: '16px'}}>删除问题</span>
                    </div>
                    :
                    null
                }
              </Flex.Item>
            </Flex>
          }>
            <TextareaItem
              placeholder="填写问题（不超过50字，必填）"
              value={question && question.title}
              maxLength={50}
              clear={true}
              autoHeight
              onChange={(val) => {
                this.onQuestionTitleInput(val, question);
              }}
            />
            <TextareaItem
              placeholder="填写问题描述说明（不超过500字，选填）"
              value={question && question.description}
              maxLength={500}
              clear={true}
              rows="2"
              onChange={(val) => {
                this.onQuestionDescriptionInput(val, question);
              }}
            />
          </List>

          <List renderHeader={'问题选项'}>
            {
              question && question.options && question.options.length > 0 && question.options.map(o => {
                return (
                  <SwipeAction
                    key={o.id}
                    autoClose
                    disabled={o.disabledSwipeAction}
                    right={[
                      {
                        text: '删除选项',
                        onPress: () => this.delOption(o),
                        style: { backgroundColor: '#F4333C', color: 'white' },
                      },
                    ]}
                  >
                    <InputItem
                      placeholder="填写选项（不超过500字，必填）"
                      value={o.optionDesc}
                      maxLength={500}
                      clear={true}
                      onChange={(val) => {
                        this.onOptionDescriptionInput(val, o);
                      }}
                    />
                  </SwipeAction>
                );
              })
            }
            <Item onClick={() => {this.addOption()}}>
              <div style={{width: '100%', lineHeight: '20px', textAlign: 'center', color: 'green'}}>
                <span style={{fontSize: '20px'}}>+</span><span style={{fontSize: '16px'}}>添加问题选项</span>
              </div>
            </Item>
          </List>

          <List>
            <Item
              extra={
                <Switch
                  disabled={false}
                  checked={question && (question.type !== 'Single')}
                  onClick={(checked) => {
                    this.onQuestionTypeChange(checked, question)
                  }}/>
              }
            >是否多选</Item>
          </List>
        </div>
      </div>;

    return (content);
  }

}

ReactMixin.onClass(VoteSubject, Reflux.connect(Store, 'subject'));

export default VoteSubject;
